<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css"/>
		<link rel="stylesheet" href="css/cropper.min.css"/>

	</head>

	<body>
	    
	    <!--crop-->
	    <div class="crop_edit" id="crop_edit" style="display: none;">
	    	<div class="crop_container" id="crop_container" >
                <img src="">
            </div>
            <div class="text1">
            	
            </div>
            <div class="crop_btn">
            	<button id="crop_btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">裁剪</button>
            </div>
	    </div>
	    
	    
	    <!--main-->
	    <div class="mycenter main">
	        <div class="goupload">
	        	<a href="#uploadimg">上传</a>
	        </div>
	        <div class="mylistout">
	        	<ul id="myimgbox" class="mui-table-view">
	        		<!--<li class="mui-table-view-cell msingle">
	        		    <img src="images/upload/123456/1478244450.jpg" alt="myimg" />
	        		    <div class="mui-row">
                            <div class="mui-col-xs-5">
                                <div class="mui-table-view-cell"> 
                                                                                                    魅力：<em>100</em>
                                </div>
                            </div>
                            <div class="mui-col-xs-7">
                                <div class="mui-table-view-cell mui-center" >
                                   <a class="deleteimg" href="javascript:void(0);">删除</a>
                                </div>
                            </div>
                        </div>
	        		</li>-->
	        	</ul>
	        </div>
	        <div class="addmyimg"> 
	        	<div class="addimgshow">
	        	    <div>
	        	    	<input type="file" id="imagebtn_A" name="imagebtn_A" class="selectimg_btn" accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp" value=""   />
	        	        <input type="hidden" name="cropdata" id="cropdata" value="" />
	        	    </div>
	        		
	        	</div> 
	        	<div class="mui-center">
	        		<button type="button" id="uploadimg" class="mui-btn mui-btn-danger mui-btn-outlined mywidbtn" data-loading-text="上传中" >上传</button> 
	        		
	        	</div>
	        	
	        </div>

	    </div>
        <script src="js/jquery-1.11.0.min.js"></script>
	    <script src="js/mui.min.js"></script>
	    <script src="js/app.js"></script>
	    <script src="js/myajax.js"></script>
	    <script src="js/cropper.min.js"></script>
	    
	    <script type="text/javascript">

	    	    function cropInit (){
	    	        var $crop_cantainer = jQuery("#crop_container>img");
	    	        $crop_cantainer.cropper({
                        checkImageOrigin: true,
                        aspectRatio: 2 / 3,
                        autoCropArea: 0.5,
                        crop: function (data) {
                            var json = [
                                  '{"x":' + data.x,
                                  '"y":' + data.y,
                                  '"height":' + data.height,
                                  '"width":' + data.width,
                                  '"rotate":' + data.rotate + '}'
                                ].join();
                            jQuery("#cropdata").val(json);  
                          }
                    }); 
	    	    };
	    </script>
	    
	    
	    
	    <script>
            (function($, doc) {
                $.init();
                $.plusReady(function() {
                    plus.screen.lockOrientation("portrait-primary");
                    var account = app.getUsers().account;//获取storage中的账号
                    
                    
                    //页面加载完成后，ajax加载个人所上传图片////
                    var myinfo = {
                        "account":account
                    }
                    myajax.getMyImages(myinfo,function(data){
                        
                        var appendmyimagesAll = "";
                        
                        for(var i=0;i<data.length;i++){ 
                            var imgi = data[i].address.substring(3);  
                             
                            var appendmyimghtml = '<li class="mui-table-view-cell msingle">\
                                                            <img src="'+imgi+'" alt="myimg" />\
                                                            <div class="mui-row">\
                                                                <div class="mui-col-xs-5">\
                                                                    <div class="mui-table-view-cell">\
                                                                                      魅力：<em>'+data[i].love+'</em>\
                                                                    </div>\
                                                                </div>\
                                                                <div class="mui-col-xs-7">\
                                                                    <div class="mui-table-view-cell mui-center" >\
                                                                       <a class="deleteimg" href="javascript:void(0);" data-id="'+data[i].id+'">删除</a>\
                                                                    </div>\
                                                                </div>\
                                                            </div>\
                                                        </li>';
                                                        
                       appendmyimagesAll+=appendmyimghtml;  
                        } 
                        
                        jQuery('#myimgbox').append(appendmyimagesAll);  

                    });
                    ///////////////////////////////////////////////
                    
                    
                    //////验证图片大小
                    function imgsize_ctrl(){
                       var preimgdom = document.getElementById("imagebtn_A");  
                        var preimgSize =  preimgdom.files[0].size/1024/1000;
                        preimgSize = preimgSize.toFixed(2);
                        if(preimgSize>2){
                            plus.nativeUI.toast("错误!图片大小为"+preimgSize+"M,不能大于2M!"); 
                            return false; 
                        }else{
                            return true;
                        }
                    };
                    

                    //选择图片，显示图片，提示上传/////////////////////
                    jQuery(doc).delegate(".selectimg_btn","change",function(){
                        var files = this.files ? this.files : [];
                        var b=jQuery(this).attr("id");
                        if (!files.length || !window.FileReader){
                          jQuery("#imagebtn_A").val("").parent().css("background-image","none");
                          return;  
                        };
                        if (/^image/.test( files[0].type)){
                            
                            if(!imgsize_ctrl()){
                                jQuery("#imagebtn_A").val("");
                                return false;
                            };
                            
                            var reader = new FileReader();
                            reader.readAsDataURL(files[0]);
                            reader.onload = function(){ 

                               jQuery("#crop_container").empty().html('<img src="'+this.result+'">');
                               jQuery("#crop_edit").fadeIn(); 
                               cropInit(); 
                               
//                             plus.nativeUI.toast("图片已选择，请点击上传。");
                            }
                        }else{
                            plus.nativeUI.toast("请选择图片！"); 
                            jQuery("#imagebtn_A").val("");
                            return;
                        }
                    });
                    ////////////////////////////////////////////////////
                    
//                  裁剪图片///////////////////////////////////////////

                    jQuery(doc).delegate("#crop_btn","tap",function(){ 
                        var $image = jQuery("#crop_container>img");
                        var dataURL = $image.cropper("getCroppedCanvas");//
                        var imgurl=dataURL.toDataURL("image/png",1.0);//这里转成base64 image，img的src可直接使用
                        jQuery("#imagebtn_A").parent("div").css("background-image", "url("+imgurl+")");
                        jQuery("#crop_edit").fadeOut();
                        
                    }); 

//                 ////////////////////////////////////////////////////
                    

                    //上传图片//////////////////////////////////////////
                    jQuery(doc).delegate("#uploadimg","tap",function(){

                        var filebox = jQuery("#imagebtn_A");
                        var filevalue = filebox.val();
                        if(filevalue ==""||filevalue=="undefined"){
                            plus.nativeUI.toast("请先选择图片！");
                            return;
                        };
                        
                        //验证图片大小
                        if(!imgsize_ctrl()){
                            jQuery("#imagebtn_A").val("");
                            return false;
                        };
                        
                        var formdata = new FormData();//ie9和以下不支持
                        var fileobj = filebox.get(0).files;
                        var imgdata = jQuery("#cropdata").val();
                        formdata.append("imguser", account);
                        formdata.append("imgdata", imgdata);
                        formdata.append("imgFile", fileobj[0]);  
                        
                        
                        jQuery("#uploadimg").html("上传中......").attr("disabled","disabled");
                        
                        
                        myajax.uploadimg(formdata,function(data){ 
                            if(data.state==1){
//                              var imgurlAll = "http://115.28.246.2/meilidaluandou/"+data.info;
                                var imgurlAll = "http://192.168.1.130/myweb/meilidaluandou/"+data.info; //测试用
                                    var appendimghtml = '<li class="mui-table-view-cell msingle">\
                                                            <img src="'+imgurlAll+'" alt="myimg" />\
                                                            <div class="mui-row">\
                                                                <div class="mui-col-xs-5">\
                                                                    <div class="mui-table-view-cell">\
                                                                                      魅力：<em>0</em>\
                                                                    </div>\
                                                                </div>\
                                                                <div class="mui-col-xs-7">\
                                                                    <div class="mui-table-view-cell mui-center" >\
                                                                       <a class="deleteimg" href="javascript:void(0);" data-id="'+data.imgid+'">删除</a>\
                                                                    </div>\
                                                                </div>\
                                                            </div>\
                                                        </li>';
                                   
                                    var appendparent = jQuery("#myimgbox");  
                                    
                                    //图片加载成功后，再展示到页面
                                    var image = new Image();
                                    image.src=imgurlAll;
                                    image.onload=function(){ 
                                        appendparent.append(appendimghtml);
                                        filebox.val("").parent().css("background-image","none"); 
//                                      mui("#uploadimg").button('reset');//切换为loading状态
                                        jQuery("#uploadimg").html("上传").removeAttr("disabled");

                                    };

                            }else{ 
                                    plus.nativeUI.toast(data.info); 
//                                  mui("#uploadimg").button('reset');//切换为loading状态
                                    jQuery("#uploadimg").html("上传").removeAttr("disabled");
                                    return;
                                }
                        });
//                      jQuery("#uploadimg").html("上传").removeAttr("disabled");
                        
                    });
                    ///////////////////////////////////////////
                    
                    
                    
                    //删除图片////////////////////////////////
                    jQuery(document).delegate(".deleteimg","tap",function(){
                       var isdele = confirm("确定要删除吗？");  
                       if(isdele!=true){
                           return;
                       }
                       var deleobj = jQuery(this).parents('li');
                       
                       var deleimgid = jQuery(this).attr("data-id");
                       var deleimginfo = {"deleimgid":deleimgid};
                       
                       myajax.deleteImg(deleimginfo,function(data){
                          if(data.state==1){
                              deleobj.remove();
                          }else{
                              plus.nativeUI.toast(data.errinfo); 
                              return;
                          }
                       });
                    });
                    ////////////////////////////////////////////


                });
  
            }(mui, document));
        </script>
	    
	    
	</body>

</html>